<template>
  <div class="timebox">
    <i class="el-icon-alarm-clock" style="margin-right: 5px;font-size: 25px;"></i>
    <div ref="startTimer"></div>
  </div>
</template>
<script>
  export default {
    name: 'timer',
    data() {
      return {
        timer: 0,
        hour: 0,
        minutes: 0
      }
    },
    created() {
      this.$store.state.seconds = 0
      this.timer = setInterval(this.startTimer, 1000);
    },
    destroyed() {
      console.log(this.$store.state.seconds)
      clearInterval(this.timer);
    },
    methods: {
      startTimer() {
        this.$store.state.seconds += 1;
        if (this.$store.state.seconds >= 60) {
          // this.$store.state.seconds = 0;
          let date = this.$store.state.seconds/60
          this.minutes = date.toFixed(0);
        }
        if (this.minutes >= 60) {
          this.minutes = 0;
          this.hour = this.hour + 1;
        }
        //补0
        this.$refs.startTimer.innerHTML =this.hour + ':' + (this.minutes < 10 ? '0' + this.minutes : this.minutes) + ':' + ((this.$store
          .state.seconds)%60 <
          10 ? '0' + (this.$store.state.seconds)%60 : (this.$store.state.seconds)%60);
      }
    }
  }
</script>
<style>
  .timebox {
    display: flex;
    height: 44px;
    align-items: center;
    justify-content: center;
    background-color:rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    font-size: 20px;
    color: dodgerblue;
    margin-left: 5vw;
    width: 90vw;
    /* height: 30px; */
    position: fixed;
    z-index: 999;
    top: 0;
  }
</style>
